<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>绿地养护</title>
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/im_imgupload.css" />
	<style>
		body {
			padding-top: 25px;
		}

		span {
			margin: 10px;
		}

		.Tabl {
			height: 50px;
			width: 88%;
			font-size: 14px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.Td1 {
			color: #B8B8B8;
			width: 110px;
		}

		.Td2 {
			color: #000000;
			text-align: left;
		}

		.Hr {
			height: 1px;
			width: 96%;
			background-color: #B8B8B8;
			margin-left: 2%;
		}

		.Butt {
			border: 1px solid #B8B8B8;
			border-radius: 20px;
			color: #FFFFFF;
			height: 17px;
			width: 17px;
			outline: none;
		}

		.TabImg {
			height: 150px;
			width: 96%;
			margin-left: 2%;
			border: 10px solid #D8D8D8;
		}

		.TdImg1 {
			height: 110px;
			width: 90px;
		}

		.TdImg2 {
			height: 110px;
			width: 90px;
		}

		.ButAdd {
			height: 110px;
			width: 100px;
			font-size: 100px;
			color: #FFFFFF;
			background-color: #B8B8B8;
		}

		.TabL {
			height: 75px;
			width: 88%;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.ButL {
			height: 40px;
			width: 100%;
			background-color: #D0D0D0;
			position: fixed;
			bottom: 0;
		}

		.Td3 {
			text-align: center;
			width: 50%;
		}

		select {
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			border: none;
			background: none;
		}
	</style>
</head>

<body>
	<table class="Tabl">
		<tr>
			<td class="Td1">绿地名称</td>
			<td class="Td2">
				<select>
					<option> --请选择-- </option>
					<option> 洛带古镇客栈区 </option>
					<option> 洛带古镇客栈区 </option>
				</select><!-- <input type="text" value="洛带古镇客栈区" /> -->
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">养护内容</td>
			<td class="Td2">
				<select>
					<option> --请选择-- </option>
					<option> 卫生清理 </option>
					<option> 设施维护 </option>
					<option> 植保工作 </option>
				</select></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">养护人数</td>
			<td class="Td2">
				<input style="color:#FF8C00" value="10" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">巡检点状态</td>
			<td class="Td2">
				<button class="Butt" id="btn1" onclick="btn(1)">
					✔
				</button><span>正常</span></td>
			<td class="Td2">
				<button class="Butt" id="btn2" onclick="btn(2)">
					✔
				</button><span>异常</span></td>
		</tr>
	</table>
	<hr class="Hr" />
	<div style="padding: 10px;">
		<ul class="upload-ul clearfix">
			<li class="upload-pick">
				<div class="webuploader-container clearfix" id="goodsUpload"></div>
			</li>
		</ul>
	</div>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">补充信息</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="TabL">
		<tr>
			<td> <textarea rows="4" cols="35" placeholder="填写你的其他内容描述！"></textarea></td>
		</tr>
	</table>
	<!-- <table class="ButL">
		<tr>
		<td class="Td3"><button>◁</button></td>
		<td class="Td3"><button>▷</button></td>
		</tr>
		</table> -->
	<p><a id="btn" class="upload-btn" href="javascript:;">提交</a></p>
</body>
<script src="../../script/webuploader.min.js"></script>
</body>
<script src="../../script/vue.js"></script>
<script src="../../script/diyUpload.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/im_imgupload.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	apiready = function () {

		var reg = $api.getStorage("userSession");
		var sids = reg.data.sysRole.sysRoleCode;
		var role = sids.role_number;
		if (role != "construction") {
			var departid = $api.getStorage('selectpor').id //项目id
			var departname = $api.getStorage('selectpor');
		} else {
			var departid = reg.data.areaid;
		}

		var userid = $api.getStorage('userSession').data.id;
		//用户id
		var qiyeid = $api.getStorage('userSession').data.depart.id;
		//企业id
		//获取项目下的绿地
		var app = new Vue({
			el: '#qqq',
			data: {
				todos: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/appcodegreenland/list.json",
					data: {
						departid: departid,
						userid: userid,
						qiyeid: qiyeid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							//alert(JSON.stringify(result));
							//var url="http://192.168.43.43:8090/kaizouba/"+result.data[i].picture;
							//alert(url)
							app.todos.push(result.data[i])
							//app.todos.push(url)
							//alert(1);
						}
					}
				});
			}
		})
		//上传图片
		var $tgaUpload = $('#goodsUpload').diyUpload({
			url: BaseServiceUrl + 'mobile/hundredPlant/hhtre.json',
			formData: {
				uid: 123,
				bbnb: 222
			},
			success: function (data) {
				alert(JSON.stringify(data))
			},
			error: function (err) {
				alert(JSON.stringify(err))
			},
			buttonText: '',
			accept: {
				title: "Images",
				extensions: 'gif,jpg,jpeg,bmp,png'
			},
			thumb: {
				width: 120,
				height: 90,
				quality: 100,
				allowMagnify: true,
				crop: true,
				type: "image/jpeg"
			}
		});
		$("#btn").click(function () {
			$tgaUpload.upload();
		});
	};
	//选择正常或者异常
	flag = "btn1";

	function btn1() {
		document.getElementById("btn2").style.color = "#FFFFFF";
		document.getElementById("btn1").style.color = "#FFFFFF";
	}

	function btn2() {
		document.getElementById("btn1").style.color = "#FFFFFF";
		document.getElementById("btn2").style.color = "#FFFFFF";
	}

	function btn(num) {
		if (num == 1) {
			document.getElementById(flag).style.color = "#FFFFFF";
			document.getElementById(flag).style.backgroundColor = "#FFFFFF";
			document.getElementById("btn1").style.color = "#FFFFFF";
			document.getElementById("btn1").style.backgroundColor = "#FF8C00";
			flag = "btn1";
		}
		if (num == 2) {
			document.getElementById(flag).style.color = "#FFFFFF";
			document.getElementById(flag).style.backgroundColor = "#FFFFFF";
			document.getElementById("btn2").style.color = "#FFFFFF";
			document.getElementById("btn2").style.backgroundColor = "#FF8C00";
			flag = "btn2";
		}
	}
</script>

</html>